<template>
	<div class="container-box">
		<div class="outerTemplate" v-scter>
			<cart-header @delChose="delChose"></cart-header>

			<cart-list :allCheck="allCheck" :controltyp="controltyp" ref="cartList" @changeChecked="changeChecked" @showSelectLadder="showSelectLadder" @showBuyMoreLadder="showBuyMoreLadder" @changeControltyp="changeControltyp" @getDiscountCoupon="getDiscountCoupon" @showChoseNum="showChoseNum" @initAllCheck="initAllCheck" @showFree="showFree">

			</cart-list>

			<cart-modle ref="cartModle" backgroundColor="#f4f4f4">
				<cart-conpon :couponListCanBeUsed="couponListCanBeUsed" @refreshData="refreshData" :couponListCanBeGet="couponListCanBeGet">
				</cart-conpon>

			</cart-modle>

			<!--返利阶梯-->
			<cart-modle ref="ladderModle">
				<select-preset :ladderList="selectLadderList">
				</select-preset>
			</cart-modle>

			<!--CartSelectGift 买赠阶梯-->
			<cart-modle ref="giftModle">
				<cart-select-gift :buyMoreLadderData="buyMoreLadderData">
				</cart-select-gift>
			</cart-modle>

			<!--选择买赠-->
			<cart-modle ref="rebeatModle">
				<buy-more-list :buyMoreDetail="rebateEvery">
				</buy-more-list>
			</cart-modle>

			<!--选择赠品-->
			<cart-modle ref="showFree">
				<buy-more-list :buyMoreDetail="showFreeData">
				</buy-more-list>
			</cart-modle>

			<cart-bottom :allCheck="allCheck" @changeChecked="changeChecked" @changeControltyp="changeControltyp">

			</cart-bottom>
		</div>
	</div>
</template>

<script>
	import CartHeader from './CartHeader'
	import CartList from './CartList'
	import CartBottom from './CartBottom'
	import CartConpon from '@/components/CartConpon'
	import CartModle from '@/components/CartMode'
	import CartSelectGift from '../../components/CartRegular/CartSelectGift'
	import { getPageTree, initDomTree } from "../../utils/getPageTree";
	import SelectPreset from '../../components/CartRegular/CartSelectPreset'
	import BuyMoreList from '../../components/CartRegular/BuyMoreList'
	import { mapGetters, mapMutations } from "vuex";
	import { translateDetailData } from '@/utils/TranslateDetailDate'

	export default {
		data() {
			return {
				msg: '这是测试首页',
				page: "cart",
				type: {
					list: "list",
					header: "header"
				},
				allCheck: false,
				controltyp: 0, // 1全选 2全取消  0 自由状态
				couponListCanBeUsed: null,
				couponListCanBeGet: null,
				selectLadderList: [],
				buyMoreLadderData: null,
				rebateEvery: null,
				showFreeData: null,
			}
		},
		components: {
			CartHeader,
			CartList,
			CartBottom,
			CartModle,
			SelectPreset,
			CartConpon,
			CartSelectGift,
			BuyMoreList

		},
		computed: {
			activeCartList() {
				return this.$store.state.cjy.activeCartList
			},
		},
		watch: {},
		methods: {
			//更改全选控制状态
			changeControltyp(data) {
				this.controltyp = data
			},

			refreshData() {
				this.$refs.cartList && this.$refs.cartList.queryRegularDetail()
			},
			// 点击删除按键
			delChose() {},
			delfromServe() {
				var confirm = {}
			},
			//更改选中状态
			changeChecked(data) {
				this.allCheck = data
			},
			showModle(eleName) {
				this.$refs[eleName] && this.$refs[eleName].showModle()
			},
			//优惠券获取列表
			getDiscountCoupon(data) {
				this.showModle('cartModle')
				this.couponListCanBeUsed = data.couponListCanBeUsed
				this.couponListCanBeGet = data.couponListCanBeGet
			},
			// 展示优加赠列表
			showSelectLadder(data) {
				this.selectLadderList = data
				console.log('//////', data)
				this.showModle('ladderModle')
			},
			//展示可选礼品列表
			showBuyMoreLadder(data) {
				this.showModle('giftModle')
				this.buyMoreLadderData = data
			},

			showChoseNum(data) {
				this.showModle('rebeatModle')
				this.rebateEvery = data
			},

			showFree(data) {
				this.showModle('showFree')
				this.showFreeData = data
			},

			initAllCheck() {
				var data = this.activeCartList
				this.allCheck = data.every((item) => {
					var item = translateDetailData(item)
					return item.preorder || item.lastStockCountNum <= 0
				})
			},
		},
		async created() {
			this.$store.dispatch('cjy/clearOffLineDetail')
		},
		mounted() {},
		updated() {},
		beforeDestroy() {
			this.$store.dispatch('cjy/clearOffLineDetail')
		}
	}
</script>

<style scoped>
	.outerTemplate {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
	}
	
	.container-box {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		overflow-x: hidden;
	}
</style>